Материал на проверке

Машичева Юлия Валерьевна

1289

Презенация на тему «Размещение изображений в HTML-документе»

Материал опубликован 27 September 2015

Размещение изображений в HTML-документе Учитель информатики МБОУ «Гимназия №5» г.Брянска Нечаева Юлия Валерьевна

Цель урока: Научиться представлять графические данные на HTML-страницах Изучить атрибуты, используемые для представления изображений в HTML-документе.

Вставка изображений в html-документ

Вставка изображений в html-документ Общая конструкция: <IMG SRC=“имя файла.расширение”> <IMG> (не имеет закрывающегося тэга) SRC=“имя файла.расширение” – указывает, где находится изображение. ! Рекомендуется размещать изображения в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения нужно будет указывать путь к файлу.

Вставка изображений в html-документ Если картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке. ! <img src=“tigra.jpg”> полный путь

Вставка изображений в html-документ Команда для вставки изображения в документ HTML: <image>image.jpg</img> <img src=“image.jpg”> <body background=“image.jpg”> <img src=“image.jpg”> <img url=“image.jpg”>

Вставка изображений в html-документ Какой путь нужно прописать для вставки изображения tigra.jpg на сайт index.html? <img src=“tigra.jpg”> Какой путь нужно прописать для вставки изображения krolik.jpg на сайт index.html? <img src=“work/images/krolik.jpg”> work site index.html tigra.jpg images krolik.jpg

Рамка вокруг изображения BORDER = число в пикселях от 0 до 10 - определяет рамку вокруг изображения. <img src=“tigra.jpg” border=0> <img src=“tigra.jpg” border=5>

Изменение размеров картинки Атрибуты: WIDTH = ширина (в пикселях или в %) HEIGHT = высота (в пикселях или в %) Пример: <img src=“tigra.jpg” width=297 height=399> Указывайте реальные размеры картинки – так сохраняется первоначальное качество изображения. !

Изменение размеров картинки Что произойдет, если размеры картинки tigra.jpg задать width=399 height=399? (Реальные размеры картинки высота – 399 пикселей, ширина – 297 пикселей)

Изменение размеров картинки Ответ: Изображение увеличится в ширину 1 2 Пример изображения и результат действия тэга с измененными атрибутами 1 2

Размещение изображения ALIGN – определяет способ выравнивания картинки по горизонтали. Пример: <img src=“tigra.jpg”> ALIGN left (по левому краю) center (по центру) right (по правому краю) Изображение нужно помещать в абзац …, а затем абзац выравнивать по левому краю, по центру, правому краю. !

Размещение изображения align=left align=center align=right

Размещение изображения в тексте align=left align=right align=bottom align=middle align=top Использование атрибута ALIGN: Текст обтекает справа Текст обтекает слева по нижней границе строки по верхней границе строки посередине строки

Размещение изображения в тексте <img src=“tigra.jpg” align=left> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. align=left

Размещение изображения в тексте <<img src=“tigra.jpg” align=right> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. align=right

Размещение изображения в тексте <img src=“tigra.jpg” align=lbottom> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. align=bottom

Размещение изображения в тексте <img src=“tigra.jpg” align=middle> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. align=middle

Размещение изображения в тексте <img src=“tigra.jpg” align=top> Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. align=top

Размещение изображения в тексте HSPACE – отступ в пикселях или % по горизонтали от картинки до других объектов документа. VSPACE – отступ в пикселях или % по вертикали от картинки до других объектов документа. <img src=“tigra.jpg”> <img src=“tigra.jpg” hspace=20 vspace=20>

Размещение изображения в тексте Параметры тега <IMG> регулирующие отступы вокруг изображения: width, height rows, cols hspace, vspace hbuffer, vbuffer iheight, iwidth

Дополнительные атрибуты ALT (альтернативный текст) определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен текстовый режим TITLE определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title Главное не путайте TITLE и ALT. Содержимое ALT отображается, если в браузере отключен показ картинок и, в отличие от TITLE, он является обязательным атрибутом. !

Дополнительные атрибуты <img src=“tigr.jpg”> Вставка изображения <img src=“tigr1.jpg”> Если допущена ошибка в названии файла <img src=“tigr1.jpg” alt=“тигр”> Допущена ошибка в названии файла и добавлен атрибут alt <img src=“tigr.jpg” title=“тигр”> При наведении мышки на изображение всплывает подсказка

Дополнительные атрибуты Код для вывода подобного изображения с подсказкой: Тигра <img src=“tigra.jpg” alt=“tigra”> <img src=“tigra.jpg” alt=“Тигра”> <img src=“tigra.jpg” title=“Тигра”> <img src=“tigra.jpg” alt=“Тигра” title=“тигр”>

Скачать оригинальную презентацию

в формате MS Powerpoint (.ppt / .pptx)

Теги публикации

Комментарии

Администрация сайта «УРОК.РФ»

2247

Уважаемые участники! Результаты конкурса будут объявлены до 7 декабря.

5 December 2018

Администрация сайта «УРОК.РФ»

2247

Уважаемые участники! Поздравляем победителей и участников с завершением конкурса! Благодарим команду жюри за проделанную работу. ПОБЕДИТЕЛИ КОНКУРСА: Екатерина Зазыкина – Листовка «Всё в твоих руках!» Юлия Аношенкова – Листовка «Сохраним нашу природу – сохраним нашу Планету» Лада Кузнецова – Плакат «Чистота в лесу» Анастасия Хохлова – Рисунок «Роща наш дом, хватит мусорить в нем» Анушик Адамян – Листовка «Берегите планету, люди!» Амаду Анатов – Плакат «Берегите природу» Елизавета Шадрина – Листовка «Сохраняй! Сокращай! Соучаствуй!» ПРИЗЫ ПОЛУЧАЮТ: Екатерина Зазыкина – Листовка «Всё в твоих руках!» Юлия Аношенкова – Листовка «Сохраним нашу природу – сохраним нашу Планету» Лада Кузнецова – Плакат «Чистота в лесу» КУРАТОРЫ ПОБЕДИТЕЛЕЙ: Марина Назарова (г. Дубна, Московская обл.) Марина Баранова (пгт. Кардымово, Смоленская обл.) Татьяна Кожухарь (г. Воронеж) Инна Хохлова (г. Чита) Алина Пименова (г. Ногинск, Московская обл.) Любовь Кучуганова (г. Горно-Алтайск) Ирина Шадрина (пос. Элисенваара, респ. Карелия) В личных кабинетах участников автоматически сформированы наградные документы, которые можно скачать бесплатно. В ближайшее время администрация свяжется с призерами для уточнения данных. С уважением, администрация.

7 December 2018

Ефимова Надежда Михайловна

486

Добрый вечер!Я оценила все 92 конкурсные работы.Почему меня исключили из состава жюри?

8 December 2018

Администрация сайта «УРОК.РФ»

2247

Здравствуйте. Каждая работа оценивается по 6 обязательным критериям. Вы оценивали работу лишь по одному критерию, что является нарушением.

10 December 2018

Кожухарь Татьяна Юрьевна

Что нужно, чтобы получить приз?

23 December 2018

Администрация сайта «УРОК.РФ»

2247

Информация была направлена вам в личном сообщении.

25 December 2018

Презенация на тему «Размещение изображений в&nbsp;HTML-документе»

Презенация на тему «Размещение изображений в HTML-документе»